<template>
  <div id="app-container" style="padding: 10px">
    <!--条件查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="queryOrderDTO.orderCode" placeholder="订单编号" clearable @clear="initData" style="width: 180px"/>
      </el-form-item>
      <el-form-item>
        <el-input v-model="queryOrderDTO.carNum" placeholder="车牌号码" clearable @clear="initData" style="width: 180px"/>
      </el-form-item>
      <el-form-item label="提交时间">
        <el-date-picker
          v-model="queryOrderDTO.createTimeStart"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"/>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="queryOrderDTO.createTimeEnd"
          type="datetime"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"/>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="initData" style="width: 70px; padding-left: 10px">查询</el-button>
      <el-button type="default" @click="resetData">重置</el-button>
      <el-button type="warning" icon="el-icon-folder-opened" @click="handleToExport" style="margin-left: 10px; width: 70px; padding-left: 10px">导出</el-button>
    </el-form>

    <!--数据显示列表-->
    <el-table fit highlight-current-row :data="dataList">
      <el-table-column type="index" label="序号" align="center"></el-table-column>
      <el-table-column prop="orderCode" label="订单编号" align="center"></el-table-column>
      <el-table-column prop="createTime" label="提交时间" align="center" width="150px"></el-table-column>
      <el-table-column prop="carNumber" label="车牌号码" align="center"></el-table-column>
      <el-table-column prop="roadName" label="所属路段" align="center"></el-table-column>
      <el-table-column prop="berthCode" label="泊位编号" align="center"></el-table-column>
      <el-table-column prop="inspectorName" label="巡检员" align="center"></el-table-column>
      <el-table-column prop="price" label="订单金额" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.modifyPrice">{{scope.row.modifyPrice | BigDecimal}}</span>
          <span v-else-if="scope.row.price">{{scope.row.price | BigDecimal}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="orderStatus" label="售后状态" align="center">
        <template slot-scope="scope">
          <span :class="scope.row.orderStatus | StatusColor">{{scope.row.orderStatus | orderStatus}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" style="width: 80px;height: 35px; padding-left: 10px; padding-top: 10px" @click="handleToDetail(scope.row.id)">订单详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="margin-top: 10px">
    </el-pagination>
  </div>
</template>

<script>

import { listSearch,getDetailById } from '../../api/order'
import fileDownload from 'js-file-download'
import axios from 'axios'
import store from '../../store'

export default {
  data(){
    return{
      queryOrderDTO: {isException: true},          // 条件搜索的对象
      dataList:[],                                 // 初始化加载数据返回的数据
      currentPage: 1,                              // 分页查询的当前页
      pageSize: 10,                                // 分页查询的每页显示条数
      total: 0,                                    // 分页查询的数据总条数
    }
  },
  filters: {
    BigDecimal: function(value) {
      if(value == null){
        return `待核算`
      }
      return `￥ ${parseFloat(value).toFixed(2)}`
    },
    orderStatus: function(value) {
      switch (value) {
        case '5':
          return '待处理';
        case '6':
          return '不通过';
        case '7':
          return '已通过';
        default:
          return '未获取到状态';
      }
    },
    StatusColor: function(value) {
      switch (value) {
        case '5':
          return 'Pending';
        case '6':
          return 'NoPass';
        case '7':
          return 'Pass';
        default:
          return 'StatusError';
      }
    }
  },
  methods:{
    initData(){
      listSearch(this.currentPage,this.pageSize,this.queryOrderDTO).then(resp => {
        /**
         * resp已经在utils/request.js拦截器中处理，不抛错就返回response.data，所以此时的resp就是后端返回的Result
         * resp.data是返回的PageData
         * resp.data.data是分页数据中的data
         */
        this.dataList = resp.data.data;
        this.total = resp.data.total;
      });
    },
    // 点击清空按钮
    resetData(){
      this.queryOrderDTO = {isException: true};
      this.initData();
    },
    // 点击导出按钮
    handleToExport(){
      /* console.log("===导出数据==="); */
      axios({
        method: 'post',
        url: "http://localhost:8080/order/export",
        responseType: 'blob', // 返回类型为数据流
        data: this.queryOrderDTO // 向后端传的参数
      }).then(res => {
        if (res && res.data) {
          // 调用js-file-download下载文件，第一个参数是数据流，第二个参数是文件名
          fileDownload(res.data, '异常订单.xlsx')
        }
      })
    },
    // 点击订单详情按钮
    handleToDetail(id){
      getDetailById(id).then(resp => {
        let detailOrderVO = resp.data;
        this.$router.push({name: 'ExceptionDetail',params: {detailOrderVO}}); // 推送到到名为Detail的路由地址并携带参数
      });
    },
    // 每页显示的分页条数发生变化时
    handleSizeChange(size){
      this.pageSize = size;
      this.initData();
    },
    // 分页的当前页发生变化时
    handleCurrentChange(current){
      this.currentPage = current;
      this.initData();
    }
  },
  created() {
    this.initData();
  }
}

</script>

<style>
  .Pending{
    color: dodgerblue;
  }
  .NoPass{
    color: red;
  }
  .Pass{
    color: #5bc648;
  }
</style>
